<template>
	<view class="content">
		<!-- shop_info -->
		<view class="shop_info flex">
			<image :src="info.logo" mode="scaleToFill" class="shop_logo flex-none"></image>
			<view class="flex flex-auto">
				<view class="flex-auto">
					<view class="title">{{info.name}}</view>
					<view class="desc">{{info.address}}{{info.full_address}}</view>
				</view>
				<image src="~@/static/shop/phone.png" mode="widthFix" class="flex-none phone" @click="ringUp"></image>
			</view>
		</view>
		<!-- shop_banner -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000"
			:duration="500" style="border-radius: 12rpx;overflow: hidden;">
			<swiper-item v-for="(item,index) in imagePhotoList" :key="index">
				<image :src="item" mode="scaleToFill" class="shop_banner"></image>
			</swiper-item>
		</swiper>
		
		<!-- title_box -->
		<view class="title_box flex between">
			<view class="title">免单项目</view>
			<view class="time">营业时间：{{info.business_hours}}</view>
		</view>
		<!-- items -->
		<view v-for="(item,index) in projects" :key="index">
			<view class="item_box flex">
				<image :src="item.img" mode="scaleToFill" class="item_head flex-none"></image>
				<view class="item_info flex">
					<view class="title">{{item.name}}</view>
					<view class="price">￥{{item.market_value}}</view>
				</view>
				<view class="item_btn flex" @click="useById(item)">点击使用</view>
			</view>
			<view class="line" style="height: 1rpx;"></view>
		</view>
		<!-- total -->
		<view class="total flex row-center">
			共{{projects.length}}个
			<image src="~@/static/shop/bottom.png" mode="widthFix"></image>
		</view>
		<!-- line -->
		<view class="lineW100" style="height: 25rpx;"></view>
		<!-- about -->
		<view class="about">
			<view class="title">用户消费须知</view>
			<view class="desc">{{info.notice}}</view>
			<view class="map_box"><map style="width: 100%; height: 340rpx;" :latitude="latitude" :longitude="longitude"
					:markers="covers"></map></view>
		</view>

		<!-- bar -->
		<view class="bar_box">
			<view class="bar_box_ctn flex row-center">
				<view class="btn flex row-center" @click="navigationShop">导航商家</view>
			</view>
		</view>
		<!-- dialog -->
		<u-popup v-model="codeShow" mode="center">
			<view class="code_ctn">
				<image :src="info.logo" mode="scaleToFill" class="head"></image>
				<view class="code_box">
					<canvas id="qrcode" canvas-id="qrcode" style="width: 300rpx;height: 300rpx;" />
				</view>
				<view class="desc">到店出示二维码，由店家核销操作</view>
				<u-button class="btn" type="primary" shape="circle" text="按钮形状" @click="savePic">保存图片</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import uQRCode from '@/components/uqrcode/common/uqrcode.js'
	export default {
		data() {
			return {
				id: '',
				codeShow: false,
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					width: 30,
					height: 30,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../static/shop/location.png'
				}],
				info: {},
				projects: [],
				codeTempUrl: '',
				imagePhotoList:[]
			};
		},
		onLoad(options) {
			this.id = options.id || '';
			if (this.id)
				this.getDetail();
			else
				this.$api.msg('无效商户')
		},
		methods: {
			toPay(img, payamount) {
				if (uni.getStorageSync('token')) {
					this.$http.post('getIndexImgTel', {}).then(res => {
						const {
							images,
							payamount
						} = res.data || {};
						uni.navigateTo({
							url: `/pagesuser/user/orders?img=${images[0]}&payamount=${payamount}`
						})
					}).catch(e => {
						this.$api.msg((e || {}).msg || '参与失败')
					})

				} else {
					uni.showToast({
						title: '请登录后操作',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: `/pagesuser/public/login?id=${this.userid}&phone=${this.phone}`
						})
					}, 1000)
				}
			},
			async getDetail() {
				const res = await this.$http.post('shopDetail', {
					id: this.id
				})
				let info = res.data || {};
				if (res.data) {
					info = JSON.parse(JSON.stringify(info).replaceAll('null', '\"\"'))
					this.latitude = info.latitude || 0;
					this.longitude = info.longitude || 0;
					this.covers = [{
						width: 30,
						height: 30,
						latitude: info.latitude || 0,
						longitude: info.longitude || 0,
						iconPath: '../../static/shop/location.png'
					}]
					this.projects = info.project;
				}
				this.info = info;
				this.imagePhotoList = this.info.image_photo.split(',')
			},
			/** 
			 * 打电话
			 */
			ringUp() {

				if (this.id) {
					uni.makePhoneCall({
						phoneNumber: this.info.phone
					})
				} else {
					this.$api.msg('无效商户')
				}

			},
			async useById(info) {
				/*
					id: 3
					img: "https://d-zhzh.bigchun.com/zh/res/uploads/20220227/4b07871cf8d8bddcb6c5dd31d76935ec.jpg"
					market_value: "1002"
					name: "测试项目3"
					store_id: 3
					type_id: 1
				*/

				const userinfo = uni.getStorageSync('userinfo') || {};

				// 开发使用
				// if(process.env.NODE_ENV == 'development'){
				//  userinfo.is_members = 1
				// }

				if (!userinfo.is_members) {
					const that = this;
					// 去参与提示
					uni.showModal({
						title: '提示',
						content: '您还未参与该免单节活动',
						confirmText: '去参与',
						cancelText: '再想想',
						confirmColor: '#F9D31F',
						success(res) {
							if (res.confirm) {
			 				// console.log('用户点击确定');
								that.toPay(info.img, info.market_value);
							}
						}
					})
				} else {
			  try {
						const query = {
							user_id: userinfo.id,
							store_id: info.store_id,
							project_id: info.id,
						};
						const res = await this.$http.post('addStoreOrder', query);
						this.codeShow = true;
						this.$forceUpdate();
						this.showCode(JSON.stringify(query))
						if (res.code != 1) {
							uni.showToast({
								text: res.msg || '系统异常，请稍后再试',
								icon: 'none'
							})
						}
					} catch (e) {
						uni.showToast({
							text: (e || {}).msg || '系统异常，请稍后再试',
							icon: 'none'
						})
					}

				}
			},
			savePic() {
				uni.saveImageToPhotosAlbum({
					filePath: this.codeTempUrl,
					success() {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
					},
					fail(error) {
						uni.showToast({
							title: '保存失败',
							icon: 'none'
						})
					}
				})
			},
			showCode(text = '') {
				const {
					windowWidth
				} = uni.getSystemInfoSync()

				this.$nextTick(() => {
					uQRCode.make({
							canvasId: 'qrcode',
							componentInstance: this,
							size: windowWidth / 375 * 150,
							margin: 10,
							text,
							backgroundColor: '#ffffff',
							foregroundColor: '#000000',
							fileType: 'png',
							errorCorrectLevel: uQRCode.errorCorrectLevel.H
						})
						.then(res => {
							this.codeTempUrl = res.tempFilePath;
						})
				})
			},
			navigationShop() {
				if (this.id) {
					const {
						info
					} = this;
					uni.openLocation({
						latitude: (info.latitude || 0) - 0,
						longitude: (info.longitude || 0) - 0,
						fail: () => {
							this.$api.msg('无效坐标')
						}
					})
				} else {
					this.$api.msg('无效商户')
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	$lWidth: 30rpx;

	.content {
		min-height: 100vh;
		background-color: #fff;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		padding: 0 $lWidth;
	}

	.line {
		background-color: #e7e7e7;
	}

	.lineW100 {
		@extend .line;
		position: relative;
		width: 100vw;
		left: -$lWidth;
	}

	.shop_info {
		padding: 30rpx 0;

		.shop_logo {
			width: 100rpx;
			height: 100rpx;
			background: #8c8b93;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.title {
			font-size: 31rpx;
			margin-bottom: 15rpx;
		}

		.desc {
			font-size: 25rpx;
			line-height: 32rpx;
			color: #999999;
		}

		.phone {
			margin-left: 35px;
			width: 36rpx;
			height: 36rpx;
		}
	}

	.shop_banner {
		width: 100%;
		height: 375rpx;
		border-radius: 12rpx;
		background-color: #aaa;
	}

	.title_box {
		padding-top: 35rpx;
		line-height: 31rpx;
	
	.title {
			font-size: 28rpx;
			font-weight: bold;
		}

		.time {
			font-size: 22rpx;
			color: #1D1D1D;
		}
	}

	$itemPadding: 24rpx;

	.item_box {
		position: relative;
		align-items: stretch !important;
		padding-right: 190rpx;
		font-size: 28rpx;
		padding: $itemPadding 0;
		color: #1D1D1D;

		.item_head {
			width: 150rpx;
			height: 150rpx;
			background: #e5e5e5;
			border-radius: 12rpx;
			margin-right: 18rpx;
		}

		.item_info {
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-between;
			font-weight: bold;

			.price {
				color: #ff0000;
			}
		}
	
	.item_btn {
			position: absolute;
			right: 0;
			bottom: $itemPadding;
			width: 170rpx;
			height: 58rpx;
			background: #f9d31f;
			border-radius: 30rpx;
			color: #ffffff;
			justify-content: center;
		}
	}

	.total {
		color: #ff0000;
		font-size: 25rpx;
		padding: 32rpx 0;

		image {
			width: 22rpx;
			height: 15rpx;
			margin-left: 15rpx;
		}
	}

	.about {
		padding: 35rpx 0 0;

		.title {
			font-size: 28rpx;
			font-weight: bold;
			color: #1D1D1D;
		}

		.desc {
			font-size: 25rpx;
			line-height: 32rpx;
			color: #999999;
			margin-top: 30rpx;
		}

		.map_box {
			padding: 30rpx 0;
		}
	}

	.bar_box {
		height: 130rpx;

		.bar_box_ctn {
			width: 100vw;
			height: 130rpx;
			position: fixed;
			background-color: #fff;
			bottom: 0;
			left: 0;
			box-shadow: 0 0 5rpx 5rpx #f5f5f5;
			padding: 0 $lWidth;

			.btn {
				flex: 1;
				height: 75rpx;
				background: #f9d31f;
				border-radius: 38rpx;
				font-size: 26rpx;
				color: #ffffff;
			}
		}
	}

	.code_ctn {
		width: 520rpx;
		height: 620rpx;
		background: url(~@/static/shop/detail_dialog.png) no-repeat -5rpx 1rpx;
		background-size: 100% 100%;

		.head {
			width: 136rpx;
			height: 136rpx;
			margin: 0 auto 28rpx;
			border-radius: 78rpx;
			display: block;
		}

		.code_box {
			width: 300rpx;
			height: 300rpx;
			margin: 0 auto 35rpx;
			background-color: #F5F5F5;
		}

		.desc {
			text-align: center;
			font-size: 18rpx;
			margin-bottom: 25rpx;
		}
	}

	::v-deep .u-mode-center-box.data-v-17becaea {
		background-color: transparent;
	}

	::v-deep .btn button {
		width: 272rpx;
		height: 64rpx;
		background: #F9D31F;
		border-radius: 32rpx;
		font-size: 24rpx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.between {
		justify-content: space-between;
	}

	.row-center {
		justify-content: center;
	}

	.flex-none {
		flex-shrink: 0;
	}

	.flex-auto {
		flex: 1;
	}
</style>
